<template>
  <view class="container">
    <!-- PDF显示 -->
    <view class="pdf-wrapper">
      <text class="loading-box" v-if="isShowLoading">
        <u-loading mode="circle" size="150" color="#2b85e4"></u-loading>
        <view class="text">协议生成中，请稍后···</view>
      </text>

      <view class="pdf-box" :class="{ h80: !isSign }">
        <show-pdf class="iframe" ref="pdf" v-for="i in numPages" :key="i" :src="url" :page="i"></show-pdf>
      </view>

    </view>

  </view>
</template>

<script>
import ShowPdf from "vue-pdf";
import {mapGetters} from "vuex"

export default {
  data() {
    return {
      isShowLoading: true,
      url: "",
      numPages: null, // pdf 总页数,
    };
  },
  components: {
    ShowPdf,
  },
  computed: {
    ...mapGetters(["isSign"]),
  },
  async mounted() {

  },
  methods: {
    async getPdf(res) {
      const data = res
      if (data.isSign === "Y") {
        this.$store.commit("UPDATE_SIGN_STATUS", true);
      }
      this.url = data.pdfPath;
      this.getNumPages(data.pdfPath);
      this.showTopTips();
    },
    showTopTips() {
      if (this.isSign) {
        uni.showToast({
          title: '签订成功',
          icon: 'success'
        })
      }
    },
    //计算pdf页码总数
    getNumPages(url) {
      let loadingTask = ShowPdf.createLoadingTask(url);
      loadingTask.promise
          .then((pdf) => {
            this.numPages = pdf.numPages;
            setTimeout(() => {
              this.isShowLoading = false;
            }, 1500);
          })
          .catch((err) => {
            uni.showToast({
              title: "协议加载失败",
              icon: "error",
            });
          });
    },
  },
  onLoad(options) {
    if (options.isSign) {
      options.isSign += ''
    }
    this.getPdf(options)
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
  },
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 20px;
}

.custom-btn {
  //margin: 15px auto;
  //left: 50%;
  //transform: translateX(-50%);
}

uni-page-body {
  height: 100%;
}

.u-tips {
  height: auto;
}

.pdf-box {
  position: absolute !important;
  top: 120px;
  height: 68vh;
  overflow-y: scroll;
}

.tips {
  position: absolute;
  bottom: 50px;
  margin: 15px auto;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  font-size: 12px;
  color: #666;
  width: 100%;
  text-align: center;
}

.custom-btn {
  position: absolute;
  bottom: 10px;
  margin: 15px auto;
  left: 50%;
  transform: translateX(-50%);
}

.loading-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;

  .text {
    margin-top: 10px;
  }
}

.fixed {
  position: fixed;
  width: 100%;
  height: 90px;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e1e1e1;
}

.pt40 {
  padding-top: 50px;
}

.h80 {
  height: 73vh !important;
}
</style>
